<template>
  <view :style="colorStyle">
    <view
      class="videoModule"
      :style="{
        paddingTop: `${info.style.pTop * 2}rpx`,
        paddingLeft: `${info.style.pLeft * 2}rpx`,
        paddingRight: `${info.style.pRight * 2}rpx`,
        paddingBottom: `${info.style.pBottom * 2}rpx`,
        marginTop: `${info.style.mTop * 2}rpx`,
        marginLeft: `${info.style.mLeft * 2}rpx`,
        marginRight: `${info.style.mRight * 2}rpx`,
        marginBottom: `${info.style.mBottom * 2}rpx`,
        background: `${info.style.bgColor}`,
      }"
    >
      <view class="info1">
        <u-parse :content="info.content"></u-parse>
      </view>
    </view>
  </view>
</template>

<script>
import colors from "@/mixins/color";
export default {
  mixins: [colors],
  props: {
    info: {
      default: {},
    },
  },
  data() {
    return {
      videoContext: null,
    };
  },
  mounted() {
    console.log("----------videomounted----------");
    if (this.info.autoplay) {
      this.videoContext = uni.createVideoContext(`videos${0}`, this);
      this.videoContext.play();
    }
  },
  methods: {
    videoChange(e) {
      let current = e.detail.current;
      this.info.value.map((item, index) => {
        uni.createVideoContext(`videos${index}`, this).pause();
        if (current == index) {
          if (this.info.autoplay) {
            let videoContext = uni.createVideoContext(`videos${index}`, this);
            videoContext.play();
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.videoModule {
  .info1 {
    position: relative;

    img,
    video {
      width: 100%;
      height: 100%;
      background: #f5f5f5;
      // object-fit: cover;
    }
  }
}
</style>
